<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI-中医旺旺 - 用户协议</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <h1>AI-中医旺旺服务协议</h1>
        
        <!-- 协议内容区域 -->
        <div class="agreement" id="agreementSection">
            <h2>用户服务协议</h2>
            <p>尊敬的用户：</p>
            <p>欢迎使用AI-中医旺旺应用程序。在使用本应用前，请仔细阅读以下协议内容：</p>

            <h3>一、总则</h3>
            <p>本协议是用户与AI-中医旺旺应用程序之间的法律声明。用户使用本应用即表示完全接受本协议的所有条款。</p>

            <h3>二、免责声明</h3>
            <p>1. 本应用仅作为健康资讯咨询平台，提供的所有信息仅供参考。</p>
            <p>2. 用户在使用过程中的一切行为均由用户本人承担全部责任。</p>
            <p>3. 用户因使用本应用而产生的任何纠纷、诉讼、损失，均与本应用无关。</p>

            <h3>三、服务内容</h3>
            <p>1. 本应用提供基于人工智能的中医健康咨询服务。</p>
            <p>2. 服务内容包括但不限于健康咨询、养生建议、中医知识普及等。</p>

            <h3>四、服务费用</h3>
            <p>1. 用户可选择包月或包年的会员服务。</p>
            <p>2. 具体收费标准以支付页面显示为准。</p>
            <p>3. 服务费用一经支付，除法律规定的情形外，不予退还。</p>
        </div>

        <!-- 同意选项 -->
        <div class="checkbox-container">
            <input type="checkbox" id="agreeCheckbox">
            <label for="agreeCheckbox">我已阅读并同意上述协议内容</label>
        </div>

        <!-- 确认按钮 -->
        <button class="button" id="confirmButton" disabled>确认并继续</button>

        <!-- 支付部分 -->
        <div class="payment-section" id="paymentSection">
            <h2>选择服务套餐</h2>
            
            <!-- 支付选项 -->
            <div class="payment-options">
                <div class="payment-option" data-plan="monthly">
                    <h3>月度会员</h3>
                    <div class="price">￥39.9</div>
                    <p>按月付费，随时取消</p>
                </div>
                <div class="payment-option" data-plan="yearly">
                    <h3>年度会员</h3>
                    <div class="price">￥299</div>
                    <div class="save">节省￥179.8</div>
                    <p>年付更优惠</p>
                </div>
            </div>

            <!-- 月度会员支付二维码 -->
            <div class="qr-code-section" id="monthlyQRSection">
                <h3>月度会员支付</h3>
                <div class="qr-code-container">
                    <div class="qr-code">
                        <img src="images/wechat-monthly.jpg" alt="微信支付月度会员">
                        <div class="qr-code-title">微信支付</div>
                    </div>
                    <div class="qr-code">
                        <img src="images/alipay-monthly.jpg" alt="支付宝月度会员">
                        <div class="qr-code-title">支付宝支付</div>
                    </div>
                </div>
            </div>

            <!-- 年度会员支付二维码 -->
            <div class="qr-code-section" id="yearlyQRSection">
                <h3>年度会员支付</h3>
                <div class="qr-code-container">
                    <div class="qr-code">
                        <img src="images/wechat-yearly.jpg" alt="微信支付年度会员">
                        <div class="qr-code-title">微信支付</div>
                    </div>
                    <div class="qr-code">
                        <img src="images/alipay-yearly.jpg" alt="支付宝年度会员">
                        <div class="qr-code-title">支付宝支付</div>
                    </div>
                </div>
            </div>

            <!-- 返回按钮 -->
            <button class="button back-button" id="backButton">返回协议</button>
        </div>
    </div>

    <script src="js/main.js"></script>
</body>
</html>